<template>
  <div class="app">
    <!-- 头部 -->
    <header>
      <van-nav-bar
        left-text="ele.me"
        right-text="登录|注册"
        @click-right="$router.push('/login')"
      >
      </van-nav-bar>
    </header>
    <div class="content">
      <van-cell
        class="describe"
        title="当前定位城市"
        value="定位不准是,请在城市列表中选择"
        size="large"
      />
      <!-- 定位城市 -->
      <van-cell
        :title="guess.name"
        is-link
        class="current"
        @click="toLocation(guess.name, guess.id)"
      />
      <!-- 热门城市 -->
      <div class="cityItem">
        <p>热门城市</p>
        <van-grid :column-num="4" class="hotCity">
          <van-grid-item
            v-for="item in hot"
            :key="item.id"
            :text="item.name"
            @click="toLocation(item.name, item.id)"
          />
        </van-grid>
      </div>
      <!-- 所有城市 -->
      <div class="cityItem" v-for="(item, key) in group" :key="key">
        <div v-for="(val, i) in keys" :key="i">
          <p>{{ val }}<span>(按字母排序)</span></p>
          <van-grid :column-num="4">
            <van-grid-item
              v-for="value in item"
              :key="value.id"
              :text="value.name"
              @click="toLocation(value.name, value.id)"
            />
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { cityList } from "../api/city";
export default {
  data() {
    return {
      guess: {},
      hot: [],
      group: [],
      keys: [],
    };
  },
  created() {
    // 定位城市
    cityList({ type: "guess" }).then((res) => {
      console.log(64, res);
      this.guess = res.data;
    });
    // 热门城市
    cityList({ type: "hot" }).then((res) => {
      console.log(69, res);
      this.hot = res.data;
    });
    // 所有城市
    cityList({ type: "group" }).then((res) => {
      console.log(74, res);
      this.group = res.data;
      this.keys = Object.keys(res.data).sort();
    });
  },
  methods: {
    // 点击跳转到城市搜索页
    toLocation(name, id) {
      this.$router.push({
        path: "/location",
        query: { name, id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.app {
  height: 100vh;
  background-color: #f5f5f5;
  /deep/.van-nav-bar {
    background-color: #3190e8;
    .van-icon,
    .van-nav-bar__text {
      font-size: 18px;
      color: #fff;
    }
  }
  .content {
    .van-cell {
      border-bottom: 1px solid #ccc;
    }
    .describe .van-cell__title {
      float: left;
      flex: none;
    }
    .cityItem {
      margin: 10px 0;
      background-color: #fff;
      //   /deep/.van-grid-item__text {
      //     overflow: hidden;
      //     text-overflow: ellipsis;
      //     white-space: nowrap;
      //   }
      /deep/.hotCity {
        .van-grid-item__text {
          color: #3190e8;
        }
      }
      p {
        margin: 0;
        height: 32px;
        line-height: 32px;
        margin-left: 16px;
        span {
          font-size: 12px;
        }
      }
      .current {
        font-size: 20px;
        color: #3190e8;
      }
      /deep/.van-grid-item__text {
        font-size: 14px;
      }
    }
  }
}
</style>